var Home = function() {

    return {
        Attendence_chart: function() {

            var attendence_chart_data = [];

            $('.btn-home-statistic').click(function() {
                $('input:checkbox.chkbox-home-statistic').each(function(key, val) {
                    $(this).prop('checked', false).parent('span').removeClass('checked').parentsUntil('div.dropdown-menu').hide();
                });

                $('input:checkbox.chkbox-home-statistic[scoretype="' + $(this).attr('scoretype') + '"]').each(function(key, val) {
                    $(this).prop('checked', true).parent('span').addClass('checked').parentsUntil('div.dropdown-menu').show();
                });

                $.ajax({
                    url: $(this).attr('data-href'),
                    type: 'post'
                }).done(function(response) {
                    if (response.code == 200) {
                        attendence_chart_data = response.data;
                        draw_attendence_chart();
                    }
                });
            }).first().trigger('click');

            $('input.chkbox-home-statistic').change(function(event) {
                draw_attendence_chart();
            });

            function draw_attendence_chart() {

                var data_attendence_chart = [];
                var a_filter = [];

                $('input.chkbox-home-statistic:checked').each(function(index, el) {
                    a_filter.push($(this).val());
                });

                $.each(attendence_chart_data, function(key, value) {

                    if (jQuery.inArray(key, a_filter) >= 0) {
                        data_attendence_chart.push(value);
                    }
                });

                $.plot($("#attendence_chart"), data_attendence_chart, {
                    series: {
                        lines: {
                            show: true,
                            lineWidth: 2,
                            fill: true,
                            fillColor: {
                                colors: [{
                                        opacity: 0.05
                                    }, {
                                        opacity: 0.01
                                    }
                                ]
                            }
                        },
                        points: {
                            show: true,
                            radius: 3,
                            lineWidth: 1
                        },
                        shadowSize: 2
                    },
                    grid: {
                        hoverable: true,
                        clickable: true,
                        tickColor: "#eee",
                        borderColor: "#eee",
                        borderWidth: 1
                    },
                    xaxis: {
                        ticks: [],
                        mode: "categories",
                        tickColor: "#eee",
                    },
                    yaxis: {
                        ticks: 10,
                        tickDecimals: 0,
                        tickColor: "#eee",
                    }
                });
            }

            function showTooltip(x, y, contents) {
                $('<div id="tooltip">' + contents + '</div>').css({
                    position: 'absolute',
                    display: 'none',
                    top: y + 5,
                    left: x + 15,
                    border: '1px solid #333',
                    padding: '4px',
                    color: '#fff',
                    'border-radius': '3px',
                    'background-color': '#333',
                    opacity: 0.80
                }).appendTo("body").fadeIn(200);
            }

            var previousPoint = null;

            $("#attendence_chart").bind("plothover", function(event, pos, item) {
                $("#x").text(pos.x.toFixed(2));
                $("#y").text(pos.y.toFixed(2));

                if (item) {
                    if (previousPoint != item.dataIndex) {
                        previousPoint = item.dataIndex;

                        $("#tooltip").remove();
                        var x = item.datapoint[0];

                        showTooltip(item.pageX, item.pageY, item.series.label + " [ " + item.series.data[x][0] + ", " + item.series.data[x][1] + " ] ");
                    }
                } else {
                    $("#tooltip").remove();
                    previousPoint = null;
                }
            });
        },
        initPieCharts: function() {

            $('.review_chart').each(function(event) {

                $.ajax({
                    url: $(this).attr('data-href'),
                    type: 'post',
                    data: {element_id: $(this).attr('id')}
                }).done(function(response) {
                    if (response.code == 200) {
                        draw_review_chart('#' + response.element_id, response.data);
                    }
                });
            });

            function draw_review_chart(chart_id, review_chart_data) {

                $.plot($(chart_id), review_chart_data, {
                    series: {
                        pie: {
                            show: true,
                            radius: 1,
                            label: {
                                show: true,
                                radius: 3 / 4,
                                formatter: function(label, series) {
                                    return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
                                },
                                background: {
                                    opacity: 0.3,
                                    color: '#000'
                                }
                            }
                        }
                    },
                    legend: {
                        show: false
                    }
                });
            }
        }
    };

}();